<template>
	<view class='container'>
		<view class="user-info">
			<view class="u-id">
				UID: {{user.userId}}
			</view>
			<view class="price-btn">
				<view class="price">
					余额:
					<view class="number">
						{{user.totalCoin}}
					</view>
					金币
				</view>
				<view class="btn" @click="toList">
					提现记录
				</view>
			</view>
		</view>

		<view class="tips">
			超过300元可以找客服单独提现
		</view>

		<view class="withdraw-box">
			<view class="icon">
				<image src="@/static/images/index/wx-icon.png" mode=""></image>
				微信
			</view>

			<view class="account-info">
				到账账户：
				<view class="account">
					{{user.nickName}}
				</view>
			</view>
			<view class="withdraw-number">
				<input type="number" v-model="coins" :placeholder="`请输入提现金币数量，余额${user.totalCoin || ''}金币`">
			</view>
			<view class="withdraw-rule">
				<view v-if='coins >= 3000'>当前价格：{{coins}}币={{coins / 100}}元，预计到账{{coins / 100}}元</view>
				<view v-else>注意：最低提现为30元 (3000币)</view>
			</view>
			<view class="withdraw-btn" @click="requestWithdrawal()">
				提现
			</view>
		</view>

		<view class="withdrawal-statement">
			<view class="title">
				提现说明：
			</view>
			<view class="item" style="color: #50CEC4;">
				1、最低提现为30元 (3000币)
			</view>
			<view class="item" style="color: #50CEC4;">
				2、一天最多提现6次，提现到当前微信零钱
			</view>
			<view class="item">
				3、微信必须实名认证，否则会提现失败
			</view>
			<view class="item">
				4、提现后，注意微信支付到账信息，或者查看微信钱包零钱明细
			</view>
			<view class="item">
				5、有任务问题，加客服咨询1638724296
			</view>
		</view>
	</view>
	<!-- 红包弹框组件 -->
	<redPacket />
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		getuser,
		Withdraw
	} from "@/api/general.js"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	onLoad(() => {
		getUserInfo()
	})
	let user = ref({})
	let coins = ref(null)


	// 提交提现申请
	const requestWithdrawal = async () => {
		try {
			if (coins.value < 3000) {
				throw "最低3000金币才能提现"
			}
			else if(coins.value > user.value.totalCoin) {
				throw "金币余额不足"
			}
			else if (coins.value > 30000) {
				throw "超过30000金币需找客服提现"
			}else {
				await Withdraw({Coin: coins.value});
				uni.showToast({
					icon: "success",
					title: "提现成功",
					mask: true
				})
				setTimeout(() => {
					getUserInfo()
					toList()
				},1000)
			}
		} catch (e) {
			console.log(e);
			if(e.constructor === String) {
				uni.showToast({
					title: e,
					icon: "none",
					mask: true
				})
			}
		}
		
	}
	// 跳转提现记录
	const toList = () => {
		uni.navigateTo({
			url: '/pages/withdraw/list?flag=3'
		})
	}
	// 获取用户信息
	const getUserInfo = async () => {
		let res = await getuser()
		user.value = res
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;

		.user-info {
			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #302C2D;
			padding: 20rpx;
			border: 1rpx solid #EDEDED;
			border-radius: 10rpx;

			.u-id {}

			.price-btn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.price {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #E7B705;
					font-weight: bold;

					.number {
						margin: 0 10rpx;
						font-size: 48rpx;
					}
				}

				.btn {
					width: 192rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: #E8B907;
					border-radius: 28rpx;
					text-align: center;
					color: #FFF;
					font-size: 30rpx;
				}
			}

		}

		.tips {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #F61717;
			padding: 20rpx 0;
		}

		.withdraw-box {
			background: #FFFFFF;
			border: 2rpx solid #EDEDED;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;

			.icon {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;

				image {
					width: 49rpx;
					height: 40rpx;

				}
			}

			.account-info {
				width: 624rpx;
				height: 120rpx;
				background: #F3F3F3;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 20rpx;
				font-size: 30rpx;

				.account {
					color: #606060;
					font-weight: bold;
				}
			}

			.withdraw-number {
				width: 100%;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				input {
					width: 100%;
					height: 80rpx;
					background-color: #f7f7f7;
					border-radius: 10rpx;
					padding-left: 20rpx;
				}
			}

			.withdraw-rule {
				width: 100%;
				text-align: left;
				font-size: 24rpx;
				color: #ff0000;
				padding: 0 60rpx;
				margin-top: 10rpx;
			}

			.withdraw-btn {
				width: 624rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #E3BB41;
				border-radius: 10rpx;
				color: #FFF;
				font-size: 36rpx;
				margin-top: 30rpx;
			}
		}

		.withdrawal-statement {
			padding: 40rpx;

			.title {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}

			.item {
				font-size: 30rpx;
				color: #302C2D;
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.active {
					color: #F23333;
				}

			}
		}
	}
</style>